<template>
  <div class="content">
    <!-- 表格区域 -->
    <el-table
      height="85vh"
      :data="ticketList"
      style="width: 100%"
      :header-cell-style="{color:'black'}"
    >
      <el-table-column label="商品编号" min-width="130px">
        <template v-slot="scope">{{ scope.row.baseProduct.code }}</template>
      </el-table-column>
      <el-table-column label="商品描述" prop width="196px">
        <template v-slot="scope">
          <span v-if="scope.row.description===undefined">----</span>
          <span v-else>
            <!-- <span v-if="scope.row.description.length > 14" :title="scope.row.description">{{ scope.row.description | beyondWidth(196) }}</span>
            <span v-else>{{ scope.row.description }}</span> -->
            <tool :content="scope.row.description">
              {{ scope.row.description }}
            </tool>
          </span>
        </template>
      </el-table-column>
      <el-table-column label="商品票型" min-width="70px">
        <template v-slot="scope">{{ ticketCategory[scope.row.ticketCategory] }}</template>
      </el-table-column>
      <el-table-column label="旅客类型" min-width="70px">
        <template v-slot="scope">{{ personType[scope.row.personType] }}</template>
      </el-table-column>
      <el-table-column label="单次购买上限" min-width="80px">
        <template v-slot="scope">数量>{{ scope.row.minQuantity }}~{{ scope.row.maxQuantity }}</template>
      </el-table-column>
      <el-table-column label="旅客年龄限制" min-width="80px">
        <template
          v-slot="scope"
        >年龄 > {{ scope.row.personTypeMinAge }}~{{ scope.row.personTypeMaxAge }}</template>
      </el-table-column>
      <el-table-column label="退款政策" min-width="60px">
        <template v-slot="scope">{{ scope.row.refundable ? '允许':'拒绝' }}</template>
      </el-table-column>
      <el-table-column label="退票服务费" min-width="80px">
        <template v-slot="scope">
          <span v-if="scope.row.serviceFee">
            <el-tooltip class="item" effect="dark" :content="$capitalizationAmount(scope.row.serviceFee)" placement="top-start">
              <span>  ￥{{ scope.row.serviceFee }}</span>
            </el-tooltip>
          </span>
          <span v-else>
            ---
          </span>
        </template>
      </el-table-column>
      <el-table-column label="过期时间" prop="offlineDate" min-width="120px" />
      <el-table-column label="子级商户通用利润" min-width="100px">
        <template v-slot="scope">
          <el-tag v-if="profit.length === 0" type="warning" effect="dark">未设置</el-tag>
          <el-tag v-else-if="isProfit(scope.row.baseProduct.code)<0" type="warning" effect="dark">未设置</el-tag>
          <span v-else>
            <el-tooltip class="item" effect="dark" :content="$capitalizationAmount(profit[profitNum(scope.row.baseProduct.code)].profit)" placement="top-start">
              <span>￥{{ profit[profitNum(scope.row.baseProduct.code)].profit }}</span>
            </el-tooltip>
          </span>
        </template>
      </el-table-column>
      <el-table-column label="操作" min-width="150px">
        <template v-slot="scope">
          <el-button type="text" @click="openDialog(scope.row.baseProduct.code)">设置利润</el-button>
          <el-button v-if="profit.length !== 0 && isProfit(scope.row.baseProduct.code)>=0" type="text" @click="deleteTicket(scope.row.baseProduct.code)">取消设置利润</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 设置利润弹出框 -->
    <el-dialog title="商品利润设置" :visible.sync="profitDialogVisible" width="30%">
      <el-slider v-model="profitValue" show-input :max="1000" :min="0" :step="0.01" />
      <span slot="footer" class="dialog-footer">
        <el-button @click="profitDialogVisible = false">取 消</el-button>
        <el-button class="el-button-right" type="primary" @click="editTicket()">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { getTicketList, editTicket, deleteTicket } from '@/api/profit'
import tool from '@/components/tool'
export default {
  name: 'Profit',
  components: { tool },
  data() {
    return {
      ticketList: [],
      profit: [],
      // 商品票型
      passTypeMap: {
        Seasonal: '季卡',
        Silver: '银卡',
        Gold: '金卡',
        Platinum: '白金'
      },
      // 商品类别
      ticketCategoryMap: {
        'Park Ticket': '公园门票',
        Express: '快速票',
        'VIP Experiences': 'VIP快速票',
        'Annual Pass': '年票'
      },
      profitDialogVisible: false,
      profitValue: 0,
      profitCode: ''
    }
  },
  computed: {
    personType() {
      return JSON.parse(localStorage.getItem('init')).ticket.person_type
    },
    ticketCategory() {
      return JSON.parse(localStorage.getItem('init')).ticket.ticket_category
    }
  },
  created() {
    this.getTicketList()
  },
  methods: {
    getTicketList() {
      getTicketList().then((res) => {
        this.ticketList = res.data.data.products
        this.profit = res.data.data.profit
        console.log(123, this.ticketList, this.ticketList[0].serviceFee)
      })
    },
    editTicket() {
      this.profitDialogVisible = false
      const query = {
        code: this.profitCode,
        profit: this.profitValue
      }
      editTicket(query).then((res) => {
        this.$message({
          message: '设置成功',
          duration: 1500,
          showClose: true,
          type: 'success'
        })
        this.getTicketList()
      })
    },
    deleteTicket(code) {
      deleteTicket(code).then(res => {
        this.getTicketList()
        this.$message({
          message: '取消成功，取消后您的子级商户门票价格可能与您相同',
          duration: 1500,
          showClose: true,
          type: 'warning'
        })
      })
    },
    openDialog(code) {
      this.profitDialogVisible = true
      if (this.profit[this.profitNum(code)] === undefined) {
        this.profitValue = 0
      } else {
        this.profitValue = parseInt(this.profit[this.profitNum(code)].profit * 100) / 100
      }
      console.log(123)
      this.profitCode = code
    },
    isProfit(code) {
      if (this.profit.length === 0) {
        return false
      } else {
        return this.profit.findIndex(item => {
          return item.code === code
        })
      }
    },
    profitNum(code) {
      return this.profit.findIndex(item => {
        return item.code === code
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.content{
  padding: 24px;
}
</style>
